<template>
  <div id="customizedCalendar">
    <div class="header">{{ whichTerm() }}</div>
    <el-calendar :first-day-of-week="7" v-model="value">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div
          slot="reference"
          class="div-Calendar"
          @click="clickCalendar(data)"
          style="position: relative; z-index: 10"
        >
          <p>{{ data.day.split("-").slice(2).join("-") }}</p>
        </div>
        <div v-if="data.isSelected" id="selectP"></div>
      </template>
    </el-calendar>
    <div id="button">
      <el-button @click="skip('preYear')" type="primary" round size="mini"
        ><i class="el-icon-arrow-left"></i>年
      </el-button>
      <el-button @click="skip('preMonth')" type="warning" round size="mini"
        ><i class="el-icon-arrow-left"></i>月
      </el-button>
      <el-button @click="skip('preDay')" type="success" round size="mini"
        ><i class="el-icon-arrow-left"></i>日
      </el-button>
      <el-button @click="skip('today')" type="info" round size="mini"
        >今天</el-button
      >
      <el-button @click="skip('postDay')" type="success" round size="mini"
        >日<i class="el-icon-arrow-right"></i>
      </el-button>
      <el-button @click="skip('postMonth')" type="warning" round size="mini"
        >月<i class="el-icon-arrow-right"></i>
      </el-button>
      <el-button @click="skip('postYear')" type="primary" round size="mini"
        >年<i class="el-icon-arrow-right"></i>
      </el-button>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "Calendar",
  data() {
    return {
      value: new Date(),
    };
  },
  computed: {
    selectDate() {
      return moment(this.value).format("YYYY-MM-DD");
    },
  },
  methods: {
    skip(flag) {
      if (flag === "preYear")
        this.value = new Date(
          this.value.setFullYear(this.value.getFullYear() - 1)
        );
      else if (flag === "preMonth")
        this.value = new Date(this.value.setMonth(this.value.getMonth() - 1));
      else if (flag === "preDay")
        this.value = new Date(this.value.setDate(this.value.getDate() - 1));
      else if (flag === "today") this.value = new Date();
      else if (flag === "postDay")
        this.value = new Date(this.value.setDate(this.value.getDate() + 1));
      else if (flag === "postMonth")
        this.value = new Date(this.value.setMonth(this.value.getMonth() + 1));
      else if (flag === "postYear")
        this.value = new Date(
          this.value.setFullYear(this.value.getFullYear() + 1)
        );
      console.log(this.value);
    },
    clickCalendar(data) {
      console.log(data);
    },
    whichTerm() {
      const year = this.value.getFullYear();
      const month = this.value.getMonth() + 1;
      if (month > 8) {
        return String(year) + "年 — " + String(year + 1) + "年第一学期";
      } else if (month < 2) {
        return String(year - 1) + "年 — " + String(year) + "年第一学期";
      } else if (month > 6 && month < 9) {
        return "暑假";
      } else {
        return String(year - 1) + "年 — " + String(year) + "年第二学期";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  color: white !important;
  font-size: 18px;
  font-weight: bolder;
  background-color: #59617a;
}

#customizedCalendar {
  width: 100%;
  height: 100%;

  #button {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #selectP {
    width: 30px;
    height: 30px;
    background-color: #15ff2c;
    position: absolute;
    border-radius: 50%;
    opacity: 0.6;
  }

  ::v-deep .el-calendar__header {
    // 修改头部背景颜色
    background-color: #57617c;
    padding: 3px 5px;
    border: none;
    display: flex;
    justify-content: center;

    .el-calendar__button-group {
      // 隐藏原生按钮
      display: none;
    }

    .el-calendar__title {
      // 修改头部标题的字体颜色
      color: white !important;
      font-size: 18px;
      font-weight: bolder;
    }
  }

  ::v-deep .el-calendar__body {
    // 修改主题部分
    padding: 0;
  }

  ::v-deep .el-calendar-table {
    thead {
      th {
        // 修改头部星期部分
        padding: 0;
        background-color: #57617c;
        color: white;
      }
    }

    .is-selected {
      .el-calendar-day {
        p {
          // 选中日期颜色
          color: black;
        }
      }
    }

    .el-calendar-day {
      // 每天小块样式设置
      padding: 0;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        // 所有日期颜色
        color: black;
        z-index: 1;
        user-select: none;
        display: flex;
      }
    }
  }

  ::v-deep .el-calendar-table__row {
    .prev,
    .next {
      // 修改非本月
      .el-calendar-day {
        p {
          color: #f0d9d5;
        }
      }
    }

    td {
      // 修改每一个日期td标签
      &:first-child,
      &:last-child {
        background-color: #f5f5f5;
      }
    }
  }

  button {
    padding: 3px 10px;
  }
}
</style>
